<template>
  <div>
    <van-nav-bar title="我的优惠券"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />

    <van-tabs v-model="activeName">
      <van-tab title="未使用"
               name="unUseList">
 <van-card  v-for="(item,index) in unUseList" :key="index"
                  :price="item.amount.toFixed(2)"
                  :desc="item.couponTypeLabel"
                  :title="item.couponName"
                  :thumb="item.couponImg">
          <template #tags>
            <van-tag plain
                     type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
            <van-tag plain
                     type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
          </template>
         
        </van-card>
      </van-tab>
      <van-tab title="已使用"
               name="hasUseList">
        <van-card  v-for="(item,index) in hasUseList" :key="index"
                  :price="item.amount.toFixed(2)"
                  :desc="item.couponTypeLabel"
                  :title="item.couponName"
                  :thumb="item.couponImg">
          <template #tags>
            <van-tag plain
                     type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
            <van-tag plain
                     type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
          </template>
          
        </van-card>
      </van-tab>
      <van-tab title="已过期"
               name="expressList">
                 <van-card  v-for="(item,index) in expressList" :key="index"
                  :price="item.amount.toFixed(2)"
                  :desc="item.couponTypeLabel"
                  :title="item.couponName"
                  :thumb="item.couponImg">
          <template #tags>
            <van-tag plain
                     type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
            <van-tag plain
                     type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
          </template>
          
        </van-card>
               </van-tab>
      <van-tab title="已锁定"
               name="hasLockList">
                 <van-card  v-for="(item,index) in hasLockList" :key="index"
                  :price="item.amount.toFixed(2)"
                  :desc="item.couponTypeLabel"
                  :title="item.couponName"
                  :thumb="item.couponImg">
          <template #tags>
            <van-tag plain
                     type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
            <van-tag plain
                     type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
          </template>
          
        </van-card>
               </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { my } from '@/api/couponService'
export default {
  components: {},
  props: {},
  data () {

    return {
      activeName: 'unUseList',
      unUseList: [],
      hasUseList: [],
      expressList: [],
      hasLockList: []
    }
  },

  computed: {},
  watch: {},
  methods: {
    load () {
      my().then(res => {

        this.unUseList = res.data.data.unUseList
        this.hasUseList = res.data.data.hasUseList
        this.expressList = res.data.data.expressList
        this.hasLockList = res.data.data.hasLockList

      })
    },
    onClickLeft () {
      this.$router.push({
        path: '/me'
      })
    },
  },
  created () {
    this.load()
  },
  mounted () { },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { }
}
</script>
<style lang='less'>
</style>